<template>
    <div id="p_indexHabit" class="p_task">
      <!-- <img src="/static/z39h5/images/habitTop.png" style="width:100%;"/> -->
      <swiper loop :list="topBanner" dots-position="center" style="height:130px;" :show-desc-mask="false">
                </swiper>
      <div class="good" :style="{height:taskHeight+'px'}">
        <div class="menu-wrapper" ref="menuWrapper">
          <ul>
            <li v-for="(group, index) in menuBtns" ref="menu" :tagkey="group.key" :tagValue="group.value" class="menu-item border-1px" :class="{'current':currentIndex === index}"
                @click="selectMenu(index, $event)">
              <span class="text">
                {{group.name}}
              </span>
            </li>
          </ul>
        </div>
        <div class="foods-wrapper" ref="foodWrapper">
          <ul>
            <li v-for="(group, index1) in menuBtns" class="food-list food-list-hook">  <h1 class="title">{{group.name}}</h1>
                    <group>
                        <swipeout>
                            <swipeout-item @on-open="actionOpen(item, index,index1)" v-for="(item, index) in group.tasks" :key="index" :ref="'action'+index1" >
                                <div slot="right-menu">
                                    <swipeout-button @click.native="" type="warn">详情</swipeout-button>
                                </div>
                                <div slot="left-menu">
                                    <swipeout-button type="primary">加入</swipeout-button>
                                </div>
                                <div slot="content" class="vux-1px-t">
                                    <cell @click.native="onAction(item)" :title="(index+1) +'.'+item.title" :inline-desc="item.description">
                                    <div slot="icon">
                                      <img src="/static/z39h5/img/logo.png" style="width:50px;height:50px;"/>
                                      <img src="/static/z39h5/images/corner.png" style="position:absolute;top:0;left:0;width:30px;height:30px;"/>
                                    </div>
                                    </cell>
                                </div>
                            </swipeout-item>
                        </swipeout>
                    </group>
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>
<script>

import moment from "moment";
import _ from 'underscore' ;

import BScroll from 'better-scroll';
import { taskAndTag  } from "../mixin";

import data from '../temp/data.json';

import api from '../../api';

const baseList = [
    {
        url: 'company?id=1',
        img: '/static/z39h5/images/habitTop.png',
        title: ''
    }, {
        url: 'company?id=2',
        img: '/static/z39h5/img/top2.jpg',
        title: ''
    }];
    const proBarList = [{
        url: '',
        img: '/static/images/vote2.jpg',
        title: ''
    }];

import {
    mapState,
    mapActions
} from 'vuex'


import {
    Tab,
    TabItem,
    TransferDomDirective as TransferDom,
    Toast,
    Swipeout,
    SwipeoutItem,
    SwipeoutButton,
    XButton,
    PopupPicker,
    Group,
    Picker,
    Cell,
    Swiper,
    SwiperItem,Panel, Grid, GridItem, GroupTitle,
    Sticky
} from 'vux'

export default {
    directives: {
        TransferDom
    },
    components: {
    Tab,
    TabItem,
        Toast,
        Swipeout,
        SwipeoutItem,
        SwipeoutButton,
        XButton,
    PopupPicker,
    Group,
    Picker,
        Cell,
    Swiper,
    SwiperItem,Panel, Grid, GridItem, GroupTitle,
    Sticky
    },
    mixins: [taskAndTag],    
    computed: {       
        ...mapState({
            uid: state => state.vux.uid
        })
    },
    watch: {
        
    },
    created() {
        this.menuBtns = data.goods;
    },
    mounted: function() {
        this.refreshList();
        
    },
    methods: {
        initPage(){
          this.refreshList();
        },
        _initScroll() {
            this.menuScroll && this.menuScroll.destroy();
            this.foodScroll && this.foodScroll.destroy();
            this.menuScroll = new BScroll(this.$refs.menuWrapper, {
              click: true
            });
            this.foodScroll = new BScroll(this.$refs.foodWrapper, {
              probeType: 3,
              click: true
            });
            this.foodScroll.on('scroll', (pos) => {
              this.scrolly = Math.abs(Math.round(pos.y));
              this.currentIndexCpt() ;
            });
            console.log("initScroll");
          },
      _calculateHeight() {
        this.listHeight = [];
        let foodList = this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
        let height = 0;
        this.listHeight.push(height);
        for (let i = 0; i < foodList.length; i++) {
          let item = foodList[i];
          height += item.clientHeight;
          this.listHeight.push(height);
        }
      },
      selectMenu(index, event) {
        if (!event._constructed) {          
          return; // 去掉自带click事件的点击
        }
        console.log("menu:" ,index ) ;
        // console.log("menu:",this.$refs.menu[index].getAttribute("tagkey") ) ;
        // this.setMenu2Value(index);
        // this.currentIndex = index ;
        let foodList = this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
        let el = foodList[index];
        this.foodScroll.scrollToElement(el, 300);
      },
      incrementTotal(target) {
        this.$refs.shopCart.drop(target);
      },
      currentIndexCpt() {
          var index = 0 ;
          for (let i = 0; i < this.listHeight.length; i++) {
            let height = this.listHeight[i];
            let height2 = this.listHeight[i + 1];
            if (!height2 || (this.scrolly >= height && this.scrolly < height2)) {
              index = i ;
              break ;
              // return i;
            }
          }
          // this.setMenu2Value(index);
          this.currentIndex = index ;            
          console.log("menu index:", index , this.scrolly ,this.listHeight.length,this.listHeight);
          return index;
        },
      refreshList(y){        
        console.log("refreshList");
          this.$nextTick(() => {
            this._initScroll();
            this._calculateHeight();
            this.foodScroll.scrollTo(0, y , 0 ) ;
          }); 
      },       
      actionOpen(item,index,index1){            
          let dir = "" , target , arrIndex = index ;
          console.log("action open") ;
          target = this.$refs['action'+index1][index] ;  
          // target = this.$refs.action[index1+'_'+index] ;
          
              dir = target.direction ;
          if( dir == "left"){
              
              setTimeout(() => {
                  target.close();
              }, 300);                
          }
      },
      goTask(item,index){ // 进入任务详情
          console.log( _.clone(item)) ;
          // this.$router.push(`/taskDetail/${item.id}`) ;
      },
      onAction(item){

      },
      getData: function() {
          
      },       
      ...mapActions([
          
      ])
    },
    data() {
        return {
            currentIndex:0 ,
            taskHeight:(window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - 227, //53+44 +130
            goods: [],
            listHeight: [],
            scrolly: 0,
            selectedFood: {},
            topBanner: baseList, //首页图片banner
        }
    }
}

</script>
<style scoped>

.day-item {
  border: 1px solid #ececec;
  padding: 5px 15px;
}
.day-item-selected {
  border: 1px solid green;
}

#p_timepro .vux-button-group{
    background-color: #fff; 
    padding-top: 1px;
}
#p_timepro .vux-tab {
    padding:2px 6px ;
    height: 32px;
}
#p_timepro .vux-tab .vux-tab-item{
    background: #fff;
    line-height: 28px;    font-size: 16px;
}
#p_timepro .vux-tab .vux-tab-selected {
    background: rgba(0, 169, 255, 0.24);border-radius: 6px;
}

.checkScroll{max-height: 300px;min-height: 120px;    overflow: scroll;}
.demo1-item {
        border: 1px solid #027ab7;
    border-radius: 4px;
    padding: 0 6px 4px 4px;
    min-width: 40px;
    line-height: 31px;
    height: 31px;
    width: auto;
    text-align: center;
    font-size: 12px;
}

.demo1-item-selected {
    border: 1px solid #8e8e8e;
    background-color: #10aeff;
}

</style>
<style>

#p_timepro .weui-search-bar:before {
    height: 0;
    border-top: 0;
}
/*#p_timepro .vux-tab .vux-tab-item{
    background: #fff;
}*/
#p_timepro .day  .vux-tab-selected {
    background: #eee;
    border-radius: 4px;
}

.good {
  display: -ms-flexbox;
  display: flex;
  position: relative ;
  /*position: absolute;
  top: 77px;
  bottom: 46px;*/
  width: 100%;
  overflow: hidden;
}
.good .menu-wrapper {
  -ms-flex: 0 0 80px;
      flex: 0 0 80px;
  width: 80px;
  background: #f3f5f7;
}
.good .menu-wrapper .menu-item {
  display: table;
  /*width: 56px;*/
  height: 54px;
  line-height: 14px;
  padding: 4px 12px;
}
.good .menu-wrapper .menu-item.current {
  position: relative;
  z-index: 10;
  margin-top: -1px;
  background: #fff;
  border-left: 3px solid #10aeff;
  padding-left: 9px;
  /*font-weight: 700;*/    
  color: #10aeff;
}
.good .menu-wrapper .menu-item.current .text:after {
  display: none;
}
.good .menu-wrapper .menu-item .icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: top;
  margin-right: 4px;
  background-size: 12px 12px;
  background-repeat: no-repeat;
}
.good .menu-wrapper .menu-item .text {
  display: table-cell;
  width: 56px;
  vertical-align: middle;
  position: relative;
  font-size: 12px;
  padding-bottom: 4px;
}
.good .menu-wrapper .menu-item .text:after {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  border-top: 1px solid rgba(7,17,27,0.1);
  width: 100%;
  content: '';
}
.good .foods-wrapper {
  -ms-flex: 1;
      flex: 1;
}
.good .foods-wrapper .food-list .title {
  padding-left: 14px;
  height: 26px;
  line-height: 26px;
  border-left: 2px solid #d9dde1;
  font-size: 12px;
  color: #93999f;
  background: #f3f5f7;
}
.good .foods-wrapper .food-list .food-item {
  display: -ms-flexbox;
  display: flex;
  margin: 12px;
  padding-bottom: 12px;
  position: relative;
}
.good .foods-wrapper .food-list .food-item:after {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  border-top: 1px solid rgba(7,17,27,0.1);
  width: 100%;
  content: '';
}
.good .foods-wrapper .food-list .food-item:last-child {
  margin-bottom: 0px;
}
.good .foods-wrapper .food-list .food-item:last-child:after {
  display: none;
}
.good .foods-wrapper .food-list .food-item .icon {
  -ms-flex: 0 0 57px;
      flex: 0 0 57px;
  margin-right: 10px;
}
.good .foods-wrapper .food-list .food-item .content {
  -ms-flex: 1;
      flex: 1;
}
.good .foods-wrapper .food-list .food-item .content .name {
  margin: 2px 0 0 0;
  font-size: 14px;
  line-height: 14px;
  height: 14px;
  color: #07111b;
      overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
}
.good .foods-wrapper .food-list .food-item .content .desc,
.good .foods-wrapper .food-list .food-item .content .extra {
  font-size: 10px;
  line-height: 10px;
  color: #93999f;
}
.good .foods-wrapper .food-list .food-item .content .desc {
  margin-top: 8px;
  line-height: 12px;
      overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}
.good .foods-wrapper .food-list .food-item .content .extra .count {
  margin-right: 12px;
}
.good .foods-wrapper .food-list .food-item .content .price {
  font-weight: 700px;
  line-height: 24px;
}
.good .foods-wrapper .food-list .food-item .content .price .now {
  margin-right: 8px;
  font-size: 14px;
  color: #f01414;
}
.good .foods-wrapper .food-list .food-item .content .price .old {
  font-size: 10px;
  color: #93999f;
  text-decoration: line-through;
}
.good .foods-wrapper .food-list .food-item .content .cartControl-wrapper {
  position: absolute;
  right: 0;
  bottom: 12px;
}
li{
    list-style: none;
}
.food-list{ background-color: #fff;}   


</style>

